<template>
  <div class="operation-box">
    <div class="left">
      <div class="operation-info">
        <!-- <sub-title name="患者信息" icon-name="operate" has-icon />
        <button @click="startRecording">开始录制</button>
        <button @click="stopRecording" :disabled="!isRecording">
          停止录制
        </button>
        <button @click="downloadVideo" :disabled="chunks.length === 0">
          下载视频
        </button>
        <video ref="videoElement" controls></video> -->
        <div class="operation-content">
          <div class="pat-info">
            <img src="@/assets/home/avtar.png" alt="" class="avtar" />
            <span>钱乐惜</span>
            <span>男</span>
            <span>44岁</span>
            <span>Ⅱ级</span>
          </div>
          <div class="operation">
            <span>手术名称</span>
            <span>多发性羧化脢缺乏症</span>
          </div>
          <div class="anaesthesia">
            <span>麻醉方式</span>
            <span>全麻</span>
          </div>
          <div>
            <div style="margin-right: 53px; margin-bottom: 0">
              <svg-icon
                name="anaesthesia"
                style="width: 28px; height: 28px; margin-right: 11px"
              />
              <span>冯雪梅</span>
            </div>
            <div>
              <svg-icon
                name="operation"
                style="width: 28px; height: 28px; margin-right: 11px"
              />
              <span>何炜亭</span>
            </div>
          </div>
        </div>
      </div>
      <div class="human-monitoring">
        <sub-title name="体征数据" icon-name="monitoring" has-icon />
        <human-monitor />
      </div>
    </div>

    <div class="center" ref="enabledElement" v-if="viewflag">
      <!-- <monitor-Center /> -->
    </div>

    <div class="center" v-if="!viewflag">
     
    </div>
    <div class="right">
      <div class="operate">
        <el-scrollbar>
          <sub-title name="影像工具" icon-name="Vector2" />
          <div class="operate-content">
            <ul>
              <li
                v-for="(item, index) in operateList"
                :key="index"
                @click="onTools(item, index)"
                :class="{ active: btnActive === index }"
              >
                <div>
                  <svg-icon
                    :name="item.svg"
                    style="width: 30px; height: 30px"
                  />
                </div>
                <span>{{ item.title }}</span>
              </li>
            </ul>
          </div>
        </el-scrollbar>
      </div>
      <div class="output">
        <sub-title name="诊断" icon-name="Vector4" />
        <el-input
          v-model="textarea"
          :rows="4"
          type="textarea"
          placeholder="请填写诊断"
        />

        <div class="submit" @click="onSubmit">提交</div>
      </div>
      <div class="xiaolan">
        <AI />
      </div>
    </div>
  </div>
</template>

<script setup>
import subTitle from "@/components/Title/subtTitle.vue";
import AI from "@/components/AI/AI.vue";
import stepBar from "@/components/StepBar/StepBar.vue";
import humanMonitor from "./comps/humanMonitor.vue";
import monitorCenter from "./comps/monitorCenter.vue";
import html2canvas from "html2canvas";
import { nextTick, onMounted, reactive } from "vue";
import { getFileList } from "../../api/index.js";
// cornerstoneWADOImageLoader.configure({
//   webWorkerPath: "../../utils/dicom.js", // 根据实际路径进行调整
// });


const videoElement = ref(null);
const recorder = ref(null);
const chunks = ref([]);
const isRecording = ref(false);
const viewflag = ref(true); // 二维三维视图切换


const textarea = ref("");
const flag = ref(true);
const uploadResult = ref(""); // 上传截图的结果
// 工具操作
const operateList = reactive([
  {
    svg: "moveTool",
    title: "移动",
    event: () => {
      cornerstoneTools.addTool(cornerstoneTools.PanTool);
      cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 1 });
    },
  },
  {
    svg: "rolTool",
    title: "调窗",
    event: () => {
      cornerstoneTools.addTool(cornerstoneTools.WwwcTool);
      cornerstoneTools.setToolActive("Wwwc", { mouseButtonMask: 1 });
      cornerstoneTools.clearToolState(enabledElement.value, null);
    },
  },
  {
    svg: "reverseColourTool",
    title: "反片",
    event: () => {
      const viewport = cornerstone.getViewport(enabledElement.value);
      viewport.invert = !viewport.invert;
      cornerstone.setViewport(enabledElement.value, viewport);
    },
  },
  {
    svg: "ellipseTool",
    title: "椭圆",
    event: () => {
      cornerstoneTools.addTool(cornerstoneTools.EllipticalRoiTool);
      cornerstoneTools.setToolActive("EllipticalRoi", { mouseButtonMask: 1 });
    },
  },
  {
    svg: "rectangleTool",
    title: "矩形",
    event: () => {
      cornerstoneTools.addTool(cornerstoneTools.RectangleRoiTool);
      cornerstoneTools.setToolActive("RectangleRoi", { mouseButtonMask: 1 });
    },
  },
  {
    svg: "",
    title: "mpr",
    event: () => {
      viewflag.value = false;
    },
  },

  {
    svg: "",
    title: "返回",
    event: () => {
      viewflag.value = true;
    },
  },

  { svg: "lensTools", title: "透镜" },
  {
    svg: "xuanzhuanTool",
    title: "旋转",
    event: () => {
      const RotateTool = cornerstoneTools.RotateTool;
      cornerstoneTools.addTool(RotateTool, {
        configuration: {
          // 是否采用整数的角度，自动取整
          roundAngles: false,
          // 水平方向翻转角度
          flipHorizontal: false,
          // 垂直方向翻转角度
          flipVertical: false,
          // 角度的步长，此项调整旋转的鼠标的控制力度
          rotateScale: 1,
        },
      });
      cornerstoneTools.setToolActive("Rotate", {
        mouseButtonMask: 1,
      });
    },
  },
  {
    svg: "suofangTool",
    title: "缩放",
    event: () => {
      cornerstoneTools.addTool(cornerstoneTools.ZoomTool);
      cornerstoneTools.setToolActive("Zoom", { mouseButtonMask: 1 });
    },
  },

  { svg: "arrows", title: "箭头" },
  {
    // svg: "arrows",
    // title: "播放",
    // event: () => {
    //   if (flag.value) {
    //     flag.value = false;
    //     cornerstoneTools.playClip(enabledElement.value, imageIds, {
    //       frameRate: 30,
    //       direction: 1,
    //       startFrameIndex: 0,
    //     });
    //     cornerstoneTools.playClip(sagittal.value, imageIds, {
    //       frameRate: 30,
    //       direction: 1,
    //       startFrameIndex: 0,
    //     });
    //     cornerstoneTools.playClip(coronal.value, imageIds, {
    //       frameRate: 30,
    //       direction: 1,
    //       startFrameIndex: 0,
    //     });
    //   } else if ((flag.value = true)) {
    //     cornerstoneTools.stopClip(enabledElement.value);
    //     cornerstoneTools.stopClip(sagittal.value);
    //     cornerstoneTools.stopClip(coronal.value);
    //     flag.value = true;
    //   }
    // },
  },
  {
    svg: "lineTool",
    title: "直线",
    event: () => {
      cornerstoneTools.addTool(cornerstoneTools.LengthTool);
      cornerstoneTools.setToolActive("Length", { mouseButtonMask: 1 }); // 激活直尺测量工具
    },
  },
  { svg: "gouhuaTool", title: "勾画" },
  {
    svg: "jiaoduTool",
    title: "角度",
    event: () => {
      cornerstoneTools.addTool(cornerstoneTools.AngleTool);
      cornerstoneTools.setToolActive("Angle", { mouseButtonMask: 1 });
    },
  },
  { svg: "yuanxinTool", title: "圆心" },
  {
    svg: "tanzhenTool",
    title: "探针",
    event: () => {
      const DragProbeTool = cornerstoneTools.DragProbeTool;
      cornerstoneTools.addTool(DragProbeTool, {
        configuration: {
          minimal: true,
        },
      });
      cornerstoneTools.setToolActive("DragProbe", {
        mouseButtonMask: 1,
      });
      const ActiveScissorTool = cornerstoneTools.getToolForElement(
        enabledElement.value,
        "DragProbe"
      ); //element元素  toolName 工具名(不带Tool)

      ActiveScissorTool.setActiveStrategy("minimal"); //这个状态下不会显示移动坐标
    },
  },

  {
    svg: "chongzhiTool",
    title: "重置",
    event: () => {
      console.log(cornerstone, "22222");
      cornerstoneTools.clearToolState(enabledElement.value, "Length");
      cornerstoneTools.clearToolState(enabledElement.value, "Angle");
      cornerstoneTools.clearToolState(enabledElement.value, "FreehandRoi");
      cornerstoneTools.clearToolState(enabledElement.value, "Zoom");
      cornerstoneTools.clearToolState(enabledElement.value, "Pan");
      cornerstoneTools.clearToolState(enabledElement.value, "DragProbe");
      cornerstoneTools.clearToolState(enabledElement.value, "RectangleRoi");
      cornerstoneTools.clearToolState(enabledElement.value, "EllipticalRoi");
      cornerstoneTools.clearToolState(
        enabledElement.value,
        "FreehandScissorsThresholdSegmentation"
      );
      cornerstoneTools.clearToolState(enabledElement.value, "Wwwc");
      cornerstoneTools.clearToolState(enabledElement.value, "Rotate");
      cornerstoneTools.removeTool("Length");
      cornerstoneTools.removeTool("Angle");
      cornerstoneTools.removeTool("FreehandRoi");
      cornerstoneTools.removeTool("Zoom");
      cornerstoneTools.removeTool("FreehandScissorsThresholdSegmentation");
      cornerstoneTools.removeTool("DragProbe");
      cornerstoneTools.removeTool("RectangleRoi");
      cornerstoneTools.removeTool("EllipticalRoi");
      cornerstoneTools.removeTool("Wwwc");
      cornerstoneTools.removeTool("Rotate");
      cornerstoneTools.removeTool("Pan");
      cornerstone.reset(enabledElement.value);
      cornerstone.updateImage(enabledElement.value);
      console.log(cornerstoneTools, "工具");
    },
  },
  // {
  //   svg: "jietuTool",
  //   title: "截屏",
  //   event: async () => {
  //     if (enabledElement.value) {
  //       try {
  //         // 使用 html2canvas 截图
  //         const canvas = await html2canvas(enabledElement.value);
  //         // 将 canvas 转换为 Blob 对象
  //         canvas.toBlob(async (blob) => {
  //           if (blob) {
  //             // 创建 FormData 对象
  //             const formData = new FormData();
  //             formData.append("file", blob, "screenshot.png"); // 'file' 是后端接收文件的字段名

  //             // 上传到服务器
  //             const response = await axios.post(
  //               "https://your-server-url/upload",
  //               formData,
  //               {
  //                 headers: {
  //                   "Content-Type": "multipart/form-data", // 设置请求头
  //                 },
  //               }
  //             );

  //             // 显示上传结果
  //             uploadResult.value = `File uploaded successfully: ${response.data.url}`;
  //           } else {
  //             uploadResult.value = "Failed to convert canvas to Blob.";
  //           }
  //         }, "image/png"); // 指定图片格式为 PNG
  //       } catch (error) {
  //         console.error("Error capturing or uploading screenshot:", error);
  //         uploadResult.value = "Error uploading file.";
  //       }
  //     }
  //   },
  // },
  {},
]);
// 工具状态选中状态
const btnActive = ref(null);
const enabledElement = ref(null);
const imageIndex = ref(0);
const imageIds = reactive([]);



// 工具点击
const onTools = (item, index) => {
  btnActive.value = index;
  operateList[index].event();
};
const list = reactive({
  type: "dicom",
  patId: 234,
});

onMounted(() => {

});
</script>
<style scoped lang="scss">
@mixin bg() {
  padding: 15px;
  border-radius: 12px;
  background: rgba(33, 33, 33, 0.41);
  overflow: hidden;
  box-shadow: 0px 0px 10.2px 1px rgba(179, 159, 159, 0.13) inset;
  background: linear-gradient(
    112.04deg,
    rgba(67, 213, 199, 0.12) 1.24%,
    rgba(0, 0, 0, 0) 64.01%
  );
  border: 1px solid;
  border-image-source: linear-gradient(
    130.78deg,
    rgba(0, 0, 0, 0.1) 55.65%,
    rgba(67, 213, 199, 0.2) 94.34%
  );
}
.operation-box {
  height: 100%;
  display: flex;
  .left {
    width: 426px;
    height: 100%;
    .operation-info {
      // height: 265px;
      height: calc(100% - 400px);
      @include bg();
      margin-bottom: 20px;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-bottom: 0;
      color: #fff;
      font-weight: 700;
      font-size: 16px;

      .operation-content {
        height: calc(100% - 36px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 18px 0;
        .pat-info {
          span {
            &:first-of-type {
              font-size: 24px;
            }
            &:not(:last-child) {
              margin-right: 20px;
            }
          }
        }
        .avtar {
          width: 52px;
          height: 52px;
          border-radius: 50%;
          margin-right: 20px;
          object-fit: contain;
        }
        div {
          display: flex;
          align-items: center;
        }
        .operation,
        .anaesthesia {
          span:first-of-type {
            font-weight: 400;
            margin-right: 24px;
          }
        }
      }
    }
    .human-monitoring {
      height: calc(100% - 380px - 0px);
      // height: 440px;
      @include bg();
      // padding: 20px;
      padding-bottom: 0;
      // overflow: hidden;
    }
  }
  .center {
    margin: 0 10px;
    width: calc(100% - 426px - 426px - 0px);
    height: 100%;
    .time-axis {
      display: flex;
      align-items: center;
      p {
        font-weight: 700;
        font-size: 36px;
        color: #fff;
        margin-right: 27px;
      }
      .step {
        width: calc(100% - 95px);
      }
    }
  }
  .right {
    height: 100%;
    width: 426px;
    .operate {
      @include bg();
      // height: calc(100% - 414px - 20px);
      padding: 15px;
      height: 38%;
      margin-bottom: 15px;
      ul {
        display: grid;
        grid-template-columns: repeat(6, 1fr); /* 默认每行 2 个元素 */

        li {
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          margin: 10px;
          div {
            width: 47px;
            height: 47px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(
              319.35deg,
              #262424 15.44%,
              #000000 84.72%
            );
            margin-bottom: 5px;
            font-size: 14px;
            color: rgba(197, 197, 197, 1);
          }
        }
        .active {
          div {
            background: linear-gradient(
              319.35deg,
              rgba(61, 167, 141, 0.1) 15.44%,
              #39d0ac 84.72%
            );
          }
          .svg-icon {
            fill: #fff;
          }
        }
      }
      .control-box {
        display: flex;
        justify-content: center;
        img {
          width: 202px;
          height: 202px;
          object-fit: contain;
          // margin: 0 17px;
          margin-top: -25px;
        }
        .icons {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
        .icon {
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(
            319.35deg,
            #262424 15.44%,
            #000000 84.72%
          );
          width: 67px;
          height: 67px;
          border-radius: 50%;
          .svg-icon {
            fill: rgba(158, 158, 158, 0.6);
          }
        }
        .active {
          background: linear-gradient(
            319.35deg,
            rgba(61, 167, 141, 0.1) 15.44%,
            #39d0ac 84.72%
          );
          .svg-icon {
            fill: #fff;
          }
        }
      }
    }
    .xiaolan {
      @include bg();
      padding: 10px;
      height: 38%;
    }
    .output {
      height: 23.5%;
      @include bg();
      // margin: 20px 0;
      margin-bottom: 15px;
      .submit {
        float: right;
        width: 100px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #275d59;
        margin-top: 10px;
        border-radius: 10px;
      }
    }
    .setting {
      height: 141px;
      @include bg();
    }
  }
}
:deep(.el-textarea__inner) {
  background: #141e1f;
}
</style>
